<template>
  <div>
    <div class="item f-row ai-c p-1">
      <div class="star">*</div>
      <div class="title">课程编号</div>
      <el-input placeholder="请输入课程编号" v-model="courseCode"></el-input>
    </div>
    <div class="item f-row ai-c p-1">
      <div class="star">*</div>
      <div class="title">课程名称</div>
      <div class="f-row ai-c">
        <el-input placeholder="请输入课程名称" v-model="seriesName"></el-input>
        <div class="ml-1">
          <el-radio v-model="courseType" label="0">视频课程</el-radio>
          <el-radio v-model="courseType" label="2">图文课程</el-radio>
          <el-radio v-model="courseType" label="1">音频课程</el-radio>
        </div>
      </div>
    </div>
    <div class="item f-row ai-c p-1">
      <div class="star">*</div>
      <div class="title">课程价格</div>
      <div>
        <el-radio v-model="isCharge" label="0">免费</el-radio>
        <el-radio v-model="isCharge" label="1">付费</el-radio>
        <el-input
          style="width: 20rem"
          placeholder="最多两位小数"
          type="number"
          v-model="price"
          v-show="isCharge == '1'"
        ></el-input>
      </div>
    </div>
    <div class="item f-row p-1">
      <div class="star">*</div>
      <div class="title">管理栏目</div>
      <div>
        <div v-for="(i, k) in categoryList" :key="k" class="f-row ai-c mb-2">
          <div class="left ws-n">
            {{ i.title }}
          </div>
          <div class="right f-row ai-c">
            <div
              v-for="(item, key) in i.children"
              :key="key"
              @click="choice(item.id)"
              :class="[courseCategory.includes(item.id) ? 'active' : '']"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="item f-row ai-c p-1">
      <div class="star">*</div>
      <div class="title">课程封面</div>
      <div class="img_box">
        <el-upload
          class="upload-demo"
          :action="action"
          :before-upload="beforeAvatarUpload"
          multiple
          :limit="1"
          :file-list="fileList"
        >
          <img
            src="../../assets/images/others/img.png"
            class="icon_img"
            v-if="!coverPath"
          />
          <img :src="coverPath" class="fenmian" v-else />
        </el-upload>
      </div>
    </div>
    <div class="item f-row ai-c p-1">
      <div class="star">*</div>
      <div class="title">课程介绍</div>
      <WEditor :defaultText="defaultText" :richText.sync="shortDesc"></WEditor>
    </div>
    <div style="margin-left: 6.875rem">
      <div class="btn-light" @click="$router.go(-1)">返回</div>
      <div class="btn-deep" @click="nextStep">{{ btnVal }}</div>
    </div>
  </div>
</template>
<script>
import Bus from "@/utils/bus";
import { curriculum_add, curriculum_category, upfiles } from "@/request/api";
import WEditor from "@/components/WEditor/WEditor.vue";
export default {
  components: {
    WEditor,
  },
  props: ["dateilData"],
  data() {
    return {
      btnVal: "下一步",
      fileList: [],
      action: "#",
      courseCategory: [],
      shortDesc: "", //课程简介
      coverPath: "", //封面路径
      categoryList: [],
      courseCode: null, //课程编号
      seriesName: null, //课程名称
      // 默认值
      defaultText: "",
      // 富文本更新的值
      richText: "",
      isCharge: "0", //isCharge 是否收费（0：免费，1：收费）
      courseType: "0", // 课程类型资源类型 0视频 1音频 2图文
      id: null, //当前编辑id
      price: "",
      data: this.dateilData,
    };
  },
  created() {
    if (this.data) {
      this.courseCode = this.data.courseCode;
      this.seriesName = this.data.seriesName;
      this.isCharge = this.data.isCharge;
      this.courseType = this.data.courseType;
      this.coverPath = this.data.coverPath;
      this.shortDesc = this.data.shortDesc;
      this.courseCategory = this.data.courseCategory.split(',');
      this.id = this.data.id;
      this.$nextTick(() => {
        this.defaultText = this.data.shortDesc;
      });
    }

    this.getCategory();
  },
  methods: {
    beforeAvatarUpload(file) {
      var reg = /.(png|jpg|gif|jpeg|webp)$/;
      if (reg.test(file.name)) {
        upfiles(file).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: "上传成功！",
              type: "success",
            });
            this.coverPath = res.result;
          } else {
            this.$message.error("上传失败");
          }
        });
      } else {
        this.$message.error("只能上传图片哦！");
      }
    },
    //文件上传
    getURL() {},
    //选择课程类型
    choice(id) {
      if (this.courseCategory.includes(id)) {
        this.courseCategory = this.courseCategory.filter((i) => i != id);
      } else {
        this.courseCategory.push(id);
      }
    },
    //获取课程管理栏目
    getCategory() {
      curriculum_category().then((res) => {
        for (const key in res.result) {
          if (Object.hasOwnProperty.call(res.result, key)) {
            res.result[key];
            let obj = {
              title: key,
              children: res.result[key],
            };
            this.categoryList.push(obj);
          }
        }
      });
    },
    //下一步
    nextStep() {
      if (this.btnVal != "下一步") {
        return;
      }
      this.btnVal = "保存中";
      let obj = {
        id: this.id,
        courseCode: this.courseCode,
        seriesName: this.seriesName,
        isCharge: this.isCharge,
        courseType: this.courseType,
        coverPath: this.coverPath,
        shortDesc: this.shortDesc,
        courseCategory: this.courseCategory.toString(),
      };
      for (const key in obj) {
        if (key != "id") {
          if (obj[key] == "" || !obj[key]) {
            this.$message.error("请填写完整信息");
            this.btnVal = "下一步";
            console.log(obj);
            return;
          }
        }
      }
      if (this.isCharge == "1") {
        obj.price = this.price;
        if (!obj.price) {
          console.log(obj);
          this.$message.error("请填写付费价格");
          this.btnVal = "下一步";
          return;
        }
      }
      curriculum_add(obj).then((res) => {
        this.btnVal = "下一步";
        if (res.code == 200) {
          this.id = res.result.id;
          setTimeout(() => {
            Bus.$emit("nextStepConrse", {
              id: this.id,
              courseType: this.courseType,
            });
          }, 100);
        } else {
          this.$message.error("保存失败，请重试！");
        }
      });
    },
  },
};
</script>
<style lang='less' scoped>
/deep/ .upload-demo,
/deep/.el-upload,
/deep/.el-upload .fenmian {
  width: 100%;
  height: 100%;
}
.img_box {
  width: 6.5rem;
  height: 6.5rem;

  background: #f7f7f7;
  border: 0.0625rem solid #ebebeb;
  border-radius: 0.25rem;
  position: relative;
  .icon_img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2.125rem;
    height: 1.9375rem;
  }
}
.left {
  font-size: 0.875rem;
  font-family: SourceHanSansCN;
  font-weight: bold;
  width: 6rem;
  color: #52555a;
}
.right > div {
  font-size: 0.875rem;
  padding: 0.5625rem 1.4375rem;
  font-family: SourceHanSansCN;
  font-weight: 400;
  color: #63676e;
  border: 0.0625rem solid #e1e1e1;
  border-radius: 0.3125rem;
  margin-right: 1.25rem;
  cursor: pointer;
}
.active {
  background: #f4333c !important;
  color: #fff !important;
}
.el-input {
  width: 48rem;
}
.item {
  color: #333333;
  font-size: 0.875rem;
  position: relative;
  display: grid;
  grid-template-columns: 6.25rem 1fr;
}
.star {
  position: absolute;
  left: 0;
  top: --0.3125rem;
  color: var(--darkColor);
}
.title {
  margin-right: 0.375rem;
  font-size: 0.875rem;
  color: #333333;
}
</style>